<template>
	<view>
		<view>
			<!-- #ifdef H5 -->
			<view class="im">
				<image :src="this.$img+list.img"></image>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="im">
				<image :src="'http://localhost:3070'+list.img"></image>
			</view>
			<!-- #endif -->
			<view class="price">
				<view class="price1">
					<text>￥{{list.price}}</text>
					<text>￥{{list.market_price}}</text>
				</view>
				<view class="price2">
					<u-icon name="star" color="#ff6347"></u-icon>
					<view class="">
						收藏
					</view>
				</view>
			</view>
			<view class="lian">
				<view>联想小新</view>
				<view>{{list.goodsname}}</view>
				<view>11.11限时299</view>
				<view class="">
					<!-- <u-notice-bar :text="list.goodsname"></u-notice-bar> -->
				</view>

			</view>

			<view class="" id="desc" v-html="list.description">

			</view>
		</view>
		<view class="tab">
			<view class="tab1">
				<u-icon class="iii" name="server-fill"></u-icon>
				<view class="texx">客服</view>
			</view>
			<view class="tab1">
				<u-icon class="iii" name="home"></u-icon>
				<view class="texx">店铺</view>
			</view>
			<view class="tab1">
				<u-icon class="iii" name="bag"></u-icon>
				<view class="texx">购物车</view>
			</view>
			<view class="tab2" @click="tocart">
				加入购物车
			</view>
			<view class="tab3">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getgGoodsinfo,
		Cartadd
	} from '@/rquest/api.js'
	export default {
		data() {
			return {
				list: {},
				barUrl: this.$imgUrl
			}
		},
		onLoad(options) {
			console.log(options.id);
			getgGoodsinfo({
					id: options.id
				})
				.then(res => {
					// console.log(res,"商品详情");
					if (res.data.code == 200) {
						this.list = res.data.list[0]
					}
					console.log(this.list, '商品');
				})
		},
		methods: {

			// 点击加入购物车添加物品
			tocart(e) {
				console.log(e, "e");
				if (!uni.getStorageSync("user")) {
					console.log(1111111111);
					uni.showModal({
						title: '请先登录',
						success(res) {

							if (res.confirm) {
								
								// #ifdef H5
								uni.navigateTo({
									url: '../login/login'
								})
								 // #endif 
								 
								 // #ifdef MP-WEIXIN
								uni.switchTab({
									url: '../main/main'
								})
								 // #endif 
								
								
								
								
							} else if (res.cancel) {
								uni.showToast({
									title: '请先登录'
								})
							}
						},
					})

				} else {

					Cartadd({
							uid: uni.getStorageSync("user").uid,
							goodsid: this.list.id,
							num: 1
						})
						.then(res => {
							console.log(uni.getStorageSync('user').token)
							if (res.data.code == 200) {
								uni.switchTab({
									url: '../cart/cart'
								})
							}
						})
				}

			}
		}
	}
</script>

<style>
	/* #ifdef MP-WEIXIN */
	.tab1 .iii {
		font-size: 60rpx !important;
	}

	.texx {
		font-size: 33rpx;
	}

	/* #endif */
	#desc>>>img {
		width: 100%;
		height: 100%
	}

	.im {
		text-align: center;
		padding: 10rpx;
	}

	/* # */

	/* #ifdef MP-WEIXIN */

	/* #endif */

	.bbb {
		width: 100%;
	}

	.tab {
		width: 100%;
		/* height: 60px; */
		box-shadow: 0 0 20px 10 px #eee;
		background-color: white;
		display: flex;
		justify-content: space-around;
		position: fixed;
		bottom: 0px;
		padding: 30rpx 10rpx;
		box-sizing: border-box;

	}

	.tab1 {
		width: 50px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.tab2 {
		width: 100px;
		height: 40px;
		background-color: #ff6347;
		color: white;
		border-radius: 10rpx;
		text-align: center;
		line-height: 40px;
	}

	.tab3 {
		width: 80px;
		height: 40px;
		background-color: orange;
		color: white;
		border-radius: 10rpx;
		text-align: center;
		line-height: 40px;
	}

	.ling {
		display: flex;
	}

	.ling view:nth-child(1) {
		font-size: 18px;
		color: black;
		font-weight: bold;
		margin-right: 20px;
	}

	._b {
		width: 60px;
		height: 20px;
		margin: 5px;
	}

	.price {
		display: flex;
		justify-content: space-between;
	}

	.price1 {
		display: flex;
		align-items: center;
		font-size: 20px;
		color: #ff6347;
	}

	.price1 text:nth-child(2) {
		color: gray;
		font-size: 16px;
		text-decoration: line-through
	}

	.price2 {

		color: #ff6347;
	}

	.lian view:nth-child(1) {
		font-size: 20px;
	}

	.lian view:nth-child(2) {
		font-size: 18px;
		color: grey;
	}

	.lian view:nth-child(3) {
		width: 100px;
		height: 20px;
		background-color: #ff6347;
		border-radius: 10px;
		font-size: 14px;
		color: white;
		text-align: center;
		line-height: 20px;
	}

	.lian view:nth-child(4) {
		width: 100%;
		height: 39px;
		background-color: aliceblue;
		margin: auto;
	}

	.lian view:nth-child(4) text:nth-child(2) {
		color: #ff6347;
	}
</style>
